<template>
	<view class="wha">
		<canvas
			id="canvas"
			canvas-id="canvasBg"
		></canvas>
	</view>
</template>
<script>
	export default {
		name: 'canvasBg',
		props: [],
		data() {
			return {
				// 1 canvas基础信息
				cWid: 800,								// canvas 宽度
				cHei: 400,								// canvas 高度
				bL: 30,									// 图 到 canvas 左侧距离 blank
				bT: 10,									// 图 到 canvas 顶部距离 blank
				bB: 50,									// 图 到 canvas 底部间距 blank
				bR: 80,									// 图 到 canvas 右侧间距 blank
				bgc: 'rgb(255,255,255)', 				// 背景颜色
				
				labelY: ['下层', '中层', '上层', ''],	// y 轴文字
				yAxisHei: 80,							// y 轴层高
				yAxisScaleWid: 5,						// y 轴刻度长度
				xAxisScaleHei: 5,						// y 轴刻度长度
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				let t = this;
				let c = uni.createCanvasContext('canvasBg');	// canvas 实体
				c.strokeStyle = 'black';					// 线色
				// c.setLineDash([]); 						// 实线
				c.lineWidth = 2; 							// 线宽
				c.beginPath();
				// y轴箭头左
				c.moveTo(t.bL, t.bT);	// 左上起点
				c.lineTo(t.bL - 10, t.bT + 10);
				// y轴箭头右
				c.moveTo(t.bL, t.bT);	// 左上起点
				c.lineTo(t.bL + 10, t.bT + 10);
				// y轴线
				c.moveTo(t.bL, t.bT);	// 左上起点
				c.lineTo(t.bL, t.cHei - t.bB + t.xAxisScaleHei);
				c.moveTo(t.bL - t.yAxisScaleWid, t.cHei - t.bB); // 左下
				// x轴线
				c.lineTo(t.cWid - t.bL, t.cHei - t.bB);
				// x轴上箭头
				c.moveTo(t.cWid - t.bL, t.cHei - t.bB);
				c.lineTo(t.cWid - t.bL - 10, t.cHei - t.bB - 10);
				// x轴下箭头
				c.moveTo(t.cWid - t.bL, t.cHei - t.bB);
				c.lineTo(t.cWid - t.bL - 10, t.cHei - t.bB + 10);
				c.stroke();
				
				c.beginPath();
				// y轴内容
				for (var i = t.labelY.length - 1; i >= 0; i--) {
					if (i == t.labelY.length - 1) {
						c.fillText('底层', 4, t.cHei - t.bB);
					} else {
						c.fillText(t.labelY[i] + "", 4, t.cHei - t.bB - ((i + 1) * t.yAxisHei));
						// y轴刻度线
						// c.fillStyle = "black";
						// c.strokeStyle = 'black';	// 线颜色
						c.lineWidth = 1;				// 线宽
						c.setLineDash([]);			// 实线
						c.moveTo(t.bL - t.yAxisScaleWid, t.cHei - t.bB - ((i + 1) * t.yAxisHei));
						c.lineTo(t.bL, t.cHei - t.bB - ((i + 1) * t.yAxisHei));
						
						// 横虚线				
						c.strokeStyle = 'gray'; 		// 线颜色
						c.lineWidth = 1;				// 线宽
						c.setLineDash([t.yAxisScaleWid, t.yAxisScaleWid]); 			// 虚线
						c.moveTo(t.bL + t.yAxisScaleWid, t.cHei - t.bB - ((i + 1) * t.yAxisHei));
						c.lineTo(t.cWid - t.bR, t.cHei - t.bB - ((i + 1) * t.yAxisHei));
					}
				};
				c.stroke();
				
				c.beginPath();
				// x轴内容
				let devX = 20; // 文字向下偏差量
				let axleXWid = 500; // 轴文字宽度
				let rowWid = 100; // 列宽
				for (var i = 0; i < 5; i++) {
					if (i == 0) {
						// c.fillStyle = "black";
						// c.strokeStyle = 'black'; // 线颜色
						// 刻度文字
						c.fillText('0', t.bL, t.cHei - t.bB + devX, axleXWid); // 0 刻度
					}
					if (i > 0) {
						// c.fillStyle = "black";
						// c.strokeStyle = 'black'; // 线颜色
						c.lineWidth = 1; // 线宽
				
						// 文字
						c.fillText(i * 20, 20 + i * rowWid, 350 + devX, axleXWid);
						// 刻度线
						c.moveTo(t.bL + i * rowWid, 350);
						c.lineTo(t.bL + i * rowWid, 355);
				
						// 竖虚线
						// c.strokeStyle = "grey";
						c.setLineDash([t.yAxisScaleWid, t.yAxisScaleWid]); // 虚线
				
						c.moveTo(t.bL + i * rowWid, 350);
						c.lineTo(t.bL + i * rowWid, 30);
					}
				}
				
				
				// 文字
				// c.fillText('(     )', 0, t.cHei - t.bT, 80);
				// c.fillText('(     )', t.cWid - t.blankLeft - 20, t.cHei - t.bT, 80);
				// c.fillText('备注:', 0, t.cHei - t.bT + 20, 80);
				
				c.stroke();
				c.save();
				c.draw();
				c.restore();
			},
		}
	}
</script>
<style>
	#canvas{
		width: 800px;
		height: 400px;
		margin-left: 30px;
		margin-top: 30px;
		border: 1px solid #ff0;
	}
</style>